<template>
  <div class="return-Box">
    <van-row class="header-box">
      <van-notice-bar
  color="#666666"
  background="#F4F6F8"
>
  您可以选择您最近的购买点购买，建议提前电话联系。
</van-notice-bar>
    </van-row>
    <div class="BodyBox">

      <el-amap

        vid="amapDemo"
        :plugin="plugins"
        class="amap-Box"
        :center="center"
        :events="mapEvents"
        :zoom="zoom"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :vid="index"
          :icon="require('../assets/img/marker.png')"
        ></el-amap-marker>

      </el-amap>
    </div>
  </div>
</template>

<script>
import { unionMerchantsObject } from '@/api/api'
// eslint-disable-next-line no-undef

export default {
  data () {
    let self = this
    return {
      MyData: { // 我的定义变量
        // 获取的数据
        GetJsonData: [
          {
            id: 1, // 店铺ID
            isShow: true, // 是否在地图上展示标点位置
            lng: 116.33191837191066, // 经度
            lat: 40.04632037436745, // 纬度
            name: '隔壁老王的店铺', // 店铺名称
            address: '北京市昌平区公司1沃尔沃二翁11地区', // 地址
            img: 'https://img.alicdn.com/imgextra/i1/126127541/O1CN01LtbQJt25ZpHEKzzrY_!!0-saturn_solar.jpg' // 店铺图片
          }, {
            id: 2, // 店铺ID
            isShow: true, // 是否在地图上展示标点位置
            lng: 116.30401611328125, // 经度
            lat: 43.078919299834446, // 纬度
            name: '隔壁老王的店铺', // 店铺名称
            address: '北京市昌平区公司111地区', // 地址
            img: 'https://img.alicdn.com/imgextra/i1/126127541/O1CN01LtbQJt25ZpHEKzzrY_!!0-saturn_solar.jpg' // 店铺图片
          }
        ],
        markers: {
          // Data中定义方法
          click: e => {
            alert('click marker')
            console.log(e)
          }
        }
      },
      imgList: {
        positionB: require('../assets/img/positionB.png')
      },
      center: [120.324447, 36.064594], // 中心显示位置
      lng: 0, // 经度
      lat: 0, // 纬度
      locationType: false, // 是否成功获取定位
      zoom: 12, // 缩放登记

      mapEvents: {
        init (o) {
          console.log('初始化地图', o)
          // console.log(self.$refs.map.$$getInstance())
          o.getCity(result => {
            self.UserPosition = result.province
            console.log('初始化位置', result)
          })
          o.setMapStyle('amap://styles/a61d15c61ebbe6efbf38624eb39bb88d') // 自定义的高德地图的样式，我选的是马卡龙
        }
      },
      markers: [ ],
      plugins: [
        {
          // 工具条
          pName: 'ToolBar',
          position: 'RB',
          liteStyle: true,
          direction: false,
          // autoPosition: true, // 是否自动定位
          events: {
            init (instance) {
              // console.log(instance)
            }
          }
        },
        {
          // 定位按钮
          pName: 'Geolocation',
          buttonPosition: 'LB',
          zoomToAccuracy: true,
          showCircle: false,
          markerOptions: {
            content:
               '<img src="' + require('../assets/img/positionB.png') + '" style="width:120px;height:120px;margin-top: -60px;margin-left: -60px;"/>'
          },
          events: {
            init (o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  console.log(JSON.stringify(result))
                  // alert(JSON.stringify(result))
                  self.UserPosition = result.addressComponent.province
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.locationType = true
                  console.log(self.locationType)
                  self.center = [self.lng, self.lat]
                  self.$nextTick()
                }
              })
            }
          }
        }
      ]
    }
  },
  watch: {
    locationType () {
      this.GPSGD()
    }
  },
  created () {
    this.GetJson()
  },
  methods: {

    GetJson () {
      unionMerchantsObject()
        .then(res => {
          console.log(res.data)
          if (res.data.code === 0) {
            this.MyData.GetJsonData = res.data.data.list
            this.GPSGD()
          } else {
            this.$toast.fail('接口异常')
          }
        })
        .catch(err => {
          console.log(err.response)
        })
    },

    GPSGD () {
      var GPS = {
        PI: 3.14159265358979324,
        x_pi: 3.14159265358979324 * 3000.0 / 180.0,
        delta: function (lat, lon) {
        // Krasovsky 1940
        //
        // a = 6378245.0, 1/f = 298.3
        // b = a * (1 - f)
        // ee = (a^2 - b^2) / a^2;
          var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
          var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
          var dLat = this.transformLat(lon - 105.0, lat - 35.0)
          var dLon = this.transformLon(lon - 105.0, lat - 35.0)
          var radLat = lat / 180.0 * this.PI
          var magic = Math.sin(radLat)
          magic = 1 - ee * magic * magic
          var sqrtMagic = Math.sqrt(magic)
          dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI)
          dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI)
          return { 'lat': dLat, 'lon': dLon }
        },

        // WGS-84 to GCJ-02
        gcj_encrypt: function (wgsLat, wgsLon) {
          if (this.outOfChina(wgsLat, wgsLon)) { return { 'lat': wgsLat, 'lon': wgsLon } }

          var d = this.delta(wgsLat, wgsLon)
          return { 'lat': wgsLat + d.lat, 'lng': wgsLon + d.lon }
        },
        // GCJ-02 to WGS-84
        gcj_decrypt: function (gcjLat, gcjLon) {
          if (this.outOfChina(gcjLat, gcjLon)) { return { 'lat': gcjLat, 'lon': gcjLon } }

          var d = this.delta(gcjLat, gcjLon)
          return { 'lat': gcjLat - d.lat, 'lng': gcjLon - d.lon }
        },
        // GCJ-02 to WGS-84 exactly
        gcj_decrypt_exact: function (gcjLat, gcjLon) {
          var initDelta = 0.01
          var threshold = 0.000000001
          var dLat = initDelta; var dLon = initDelta
          var mLat = gcjLat - dLat; var mLon = gcjLon - dLon
          var pLat = gcjLat + dLat; var pLon = gcjLon + dLon
          var wgsLat; var wgsLon; var i = 0
          while (1) {
            wgsLat = (mLat + pLat) / 2
            wgsLon = (mLon + pLon) / 2
            var tmp = this.gcj_encrypt(wgsLat, wgsLon)
            dLat = tmp.lat - gcjLat
            dLon = tmp.lon - gcjLon
            if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold)) { break }

            if (dLat > 0) pLat = wgsLat; else mLat = wgsLat
            if (dLon > 0) pLon = wgsLon; else mLon = wgsLon

            if (++i > 10000) break
          }
          // console.log(i);
          return { 'lat': wgsLat, 'lng': wgsLon }
        },
        // GCJ-02 to BD-09
        bd_encrypt: function (gcjLat, gcjLon) {
          var x = gcjLon; var y = gcjLat
          var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)
          var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi)
          var bdLon = z * Math.cos(theta) + 0.0065
          var bdLat = z * Math.sin(theta) + 0.006
          return { 'lat': bdLat, 'lng': bdLon }
        },
        // BD-09 to GCJ-02
        bd_decrypt: function (bdLat, bdLon) {
          var x = bdLon - 0.0065; var y = bdLat - 0.006
          var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
          var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)
          var gcjLon = z * Math.cos(theta)
          var gcjLat = z * Math.sin(theta)
          return { 'lat': gcjLat, 'lng': gcjLon }
        },
        // WGS-84 to Web mercator
        // mercatorLat -> y mercatorLon -> x
        mercator_encrypt: function (wgsLat, wgsLon) {
          var x = wgsLon * 20037508.34 / 180.0
          var y = Math.log(Math.tan((90.0 + wgsLat) * this.PI / 360.0)) / (this.PI / 180.0)
          y = y * 20037508.34 / 180.0
          return { 'lat': y, 'lng': x }
        /*
        if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
            return null;
        var x = 6378137.0 * wgsLon * 0.017453292519943295;
        var a = wgsLat * 0.017453292519943295;
        var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        return {'lat' : y, 'lon' : x};
        // */
        },
        // Web mercator to WGS-84
        // mercatorLat -> y mercatorLon -> x
        mercator_decrypt: function (mercatorLat, mercatorLon) {
          var x = mercatorLon / 20037508.34 * 180.0
          var y = mercatorLat / 20037508.34 * 180.0
          y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.0)) - this.PI / 2)
          return { 'lat': y, 'lng': x }
        /*
        if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
            return null;
        if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
            return null;
        var a = mercatorLon / 6378137.0 * 57.295779513082323;
        var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
        var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
        return {'lat' : y, 'lon' : x};
        // */
        },
        // two point's distance
        distance: function (latA, lonA, latB, lonB) {
          var earthR = 6371000.0
          var x = Math.cos(latA * this.PI / 180.0) * Math.cos(latB * this.PI / 180.0) * Math.cos((lonA - lonB) * this.PI / 180)
          var y = Math.sin(latA * this.PI / 180.0) * Math.sin(latB * this.PI / 180.0)
          var s = x + y
          if (s > 1) s = 1
          if (s < -1) s = -1
          var alpha = Math.acos(s)
          var distance = alpha * earthR
          return distance
        },
        outOfChina: function (lat, lon) {
          if (lon < 72.004 || lon > 137.8347) { return true }
          if (lat < 0.8293 || lat > 55.8271) { return true }
          return false
        },
        transformLat: function (x, y) {
          var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
          ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
          ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0
          ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0
          return ret
        },
        transformLon: function (x, y) {
          var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
          ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0
          ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0
          ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0
          return ret
        }
      }
      let markers = []
      for (let a = 0; a < this.MyData.GetJsonData.length; a++) {
        // console.log(this.MyData.GetJsonData[a])
        let item = this.MyData.GetJsonData[a]
        // GPS转高德
        // console.log(item)
        var newGD = GPS.gcj_encrypt(item.latitude, item.longitude)

        console.log(newGD, this.lng, this.lat)
        // 插值
        markers.push({
          // position: [item.longitude, item.latitude],
          position: [newGD.lng, newGD.lat],
          extData: item,
          // visible: item.isShow,
          events: {
            click (e) {
              // alert(JSON.stringify(item))
            }
          }
        })
      }
      this.markers = markers
    }
  }
}
</script>

<style lang='less' >
.return-Box {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333333;
  .header-box {
    text-align: center;
    // height: 50px;
    line-height: 26px;
    border-bottom: 1px solid #eeeeee;

  }
  .BodyBox {
    height: ~"calc(100% - 42px)";
    .van-divider {
      margin: 0;
    }

    // 地图样式
    .amap-Box {
      height: 100%;

      // 隐藏版权logo
      .amap-logo,
      .amap-copyright {
        display: none !important;
      }
      // 定位按钮
      .amap-touch-toolbar .amap-zoomcontrol {
        border: none;
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.23);
        .amap-zoom-touch-plus > div,
        .amap-zoom-touch-minus > div {
          color: #2c6dff;
          // font-size: 30px;
        }
      }
      // 获取定位图标
      .amap-geolocation-con .amap-geo {
        background: url(../assets/img/position.png) 50% 50% no-repeat;
        background-size: 100% 100%;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.23);
        border: none;
      }
      .amap-icon {
        width: 20px;
        img {
          width: 20px;
          height: auto;
          left: 10px;
          top: 15px;
        }
      }
    }
  }
}
</style>
